<template>
	<view>
		<view class="header">
			<view class="order-status">
				<view class="status-icon">
					<!--  待支付 -->
					<block v-if="detail.pay_status == 10">
						<image class="image"
							src="https://tianliyx.oss-cn-shanghai.aliyuncs.com/miniprogram/static/order/status/wait_pay.png"
							mode="aspectFit"></image>
					</block>
					<!-- 待发货 -->
					<block v-else-if="detail.order_status == 10 && detail.delivery_status == 10">
						<image class="image"
							src="https://tianliyx.oss-cn-shanghai.aliyuncs.com/miniprogram/static/order/status/wait_deliver.png"
							mode="aspectFit"></image>
					</block>
					<!-- 待收货 -->
					<block
						v-else-if="detail.order_status == 10 &&  detail.delivery_status == 20 &&  detail.receipt_status == 10">
						<image class="image"
							src="https://tianliyx.oss-cn-shanghai.aliyuncs.com/miniprogram/static/order/status/wait_receipt.png"
							mode="aspectFit"></image>
					</block>
					<!-- 已完成 -->
					<block v-else-if="detail.order_status == 30">
						<image class="image"
							src="https://tianliyx.oss-cn-shanghai.aliyuncs.com/miniprogram/static/order/status/received.png"
							mode="aspectFit"></image>
					</block>
					<!-- 已取消/待取消 -->
					<block v-else-if="detail.order_status == 20 || detail.order_status == 21">
						<image class="image"
							src="https://tianliyx.oss-cn-shanghai.aliyuncs.com/miniprogram/static/order/status/close.png"
							mode="aspectFit"></image>
					</block>
				</view>
				<view class="status-text">
					<text>{{ detail.status_name }}</text>
				</view>
			</view>
		</view>

		<view class="w100 detail_box">
			<view class="w100 mb20 address_box">
				<view class="w100">
					<text class="iconfont icon-dizhi fl mt18"></text>
					<view class="address_content">
						<view class="name">{{ address.name }} {{ address.phone }}</view>
						<view class="detail">{{ address.region }}{{ address.detail }}</view>
					</view>
				</view>
			</view>

			<view>
				<view class="w100 mb20 order_box express_box" v-for="(item,index) in express">
					<view @click="toExpress(item.express_no, item.express_company, address.phone, item.kuaidi100_code)">

						<view class="w100 order p10">
							<view class="fl f26">
								<text>物流公司</text>
							</view>
							<view class="fl ml30 red_text">
								<text class="red_text">{{ item.express_company }}</text>
							</view>
						</view>
						<view class="w100 order p10">
							<view class="fl f26">
								<text>物流单号</text>
							</view>
							<view class="fl ml30">
								<text class="red_text">{{ item.express_no }}</text>
								<view class="act-copy fr" @click="COMMON.value_copy(item.express_no)">
									<text>复制</text>
								</view>
							</view>
						</view>
						<text class="iconfont c_icon icon-xiayiyeqianjinchakangengduo fr"></text>
					</view>
				</view>
			</view>

			<view class="w100 mb20 goods_list">
				<view class="w100 item" v-for="(item, index) in detail.children">
					<image :src="item.file_path" mode=""></image>
					<view class="fr item_msg">
						<view class="title">
							{{ item.goods_name }}
						</view>
						<view class="props">
							{{ item.goods_props.toString() }} ×{{ item.total_num }}
						</view>
						<view class="w100 price">
							<view class="b_price">
								<text class="sub">￥</text><text>{{ item.goods_price }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="w100 mb20 order_box">
				<view class="w100 order p10">
					<view class="fl">
						<text>订单编号</text>
					</view>
					<view class="fl ml30">
						<text>{{ detail.order_no }}</text>
						<view class="act-copy fr" @click="COMMON.value_copy(detail.order_no)">
							<text>复制</text>
						</view>
					</view>
				</view>

				<view class="w100 order p10">
					<view class="fl">
						<text>下单时间</text>
					</view>
					<view class="fl ml30">
						<text>{{ detail.create_time }}</text>
					</view>
				</view>

				<view class="w100 order p10">
					<view class="fl">
						<text>买家留言</text>
					</view>
					<view class="fl ml30">
						<text class="red_text">{{ detail.buyer_remark || "- -" }}</text>
					</view>
				</view>
			</view>

			<view class="w100 mb20 order_box express_box" v-if="invoice.title">
				<view class="w100 order p10">
					<view class="fl f26">
						<text>发票抬头</text>
					</view>
					<view class="fl ml30 red_text">
						<text class="red_text">{{ invoice.title }}</text>
					</view>
				</view>
				<view class="w100 order p10">
					<view class="fl f26">
						<text>公司税号</text>
					</view>
					<view class="fl ml30">
						<text class="red_text">{{ invoice.tax_number }}</text>
					</view>
				</view>
			</view>

			<view class="w100 mb20 order_box" v-if="detail.cancel_reason || detail.refuse_desc">
				<view class="w100 order p10" v-if="detail.cancel_reason">
					<view class="fl">
						<text class="red_text">商家订单取消理由</text>
					</view>
					<view class="fr">
						<text class="red_text">{{ detail.cancel_reason || '- -' }}</text>
					</view>
				</view>

				<view class="w100 order p10" v-if="detail.refuse_desc">
					<view class="fl">
						<text class="red_text">订单取消驳回理由</text>
					</view>
					<view class="fr">
						<text class="red_text">{{ detail.refuse_desc || '- -'  }}</text>
					</view>
				</view>
			</view>

			<view class="w100 mb20 order_box">
				<view class="w100 order p10">
					<view class="fl">
						<text>订单金额</text>
					</view>
					<view class="fr">
						<text class="red_text">￥ {{ detail.goods_total_price }}</text>
					</view>
				</view>
				<view class="w100 order p10">
					<view class="fl">
						<text>会员价</text>
					</view>
					<view class="fr">
						<text class="red_text">￥ {{ detail.member_price }}</text>
					</view>
				</view>
				<view class="w100 order p10">
					<view class="fl">
						<text>优惠金额</text>
					</view>
					<view class="fr">
						<text class="red_text">-￥ {{ detail.coupon_money }}</text>
					</view>
				</view>
				<view class="w100 order p10">
					<view class="fl">
						<text>配送费用</text>
					</view>
					<view class="fr">
						<text class="red_text">+￥ {{ detail.express_price }}</text>
					</view>
				</view>
				<view class="w100 order p10">
					<view class="w100 pay_price">

						<view class="b_price">
							<text class="s_text">实付款：</text> <text class="sub">￥</text><text
								class="orderPrice">{{ detail.pay_price }}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="w100 h200"></view>
		</view>

		<view>
			<view class="w100 goods_operate">
				<view class="btn-item onBtn" v-if="detail.status_code == 10" @click="payOrder(detail.order_id)">去支付
				</view>
				<view class="btn-item onBtn" v-if="detail.status_code == 30" @click="orderReceipt(detail.order_id)">确认收货
				</view>
				<view class="btn-item" v-if="detail.status_code < 30" @click="orderCancel(detail.order_id)">取消订单</view>
				<view class="btn-item" v-if="detail.status_code == 70 && detail.children[0].is_comment == 0"
					@click="toComment(detail.order_id, detail.children[0].order_goods_id)">去评价</view>
				<view class="btn-item" v-if="detail.order_status==30 && !detail.children[0].is_refund"
					@click="toRefund(detail.order_id, detail.children[0].order_goods_id)">申请售后</view>
			</view>
		</view>

	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app';
	import {
		COMMON
	} from "@/utils/commom.js"
	import {
		order_detail,
		cancel_order,
		order_pay,
		confirm_receipt
	} from "@/api/order.js"

	const order_id = ref(null);
	const address = ref({});
	const express = ref({});
	const invoice = ref({});
	const detail = ref({});

	onLoad((option) => {
		order_id.value = option.order_id;
	})
	
	onShow(() => {
		get_detail(order_id.value);
	})

	// 获取订单详情
	function get_detail(order_id) {
		order_detail(order_id).then(res => {
			let data = res.data;
			address.value = data.address;
			express.value = data.express;
			invoice.value = data.invoice;
			detail.value = data.list;
		})
	}

	//订单支付
	function payOrder(order_id) {
		order_pay(order_id).then(res => {
			if (res.status) {
				checkoutStore.clearState();
				COMMON.wxPay(res.data);
			} else {
				COMMON.Toast(res.msg)
			}
		})
	}

	//确认收货
	function orderReceipt(order_id) {
		uni.showModal({
			content: '确认已收到商品吗？',
			success: function(res) {
				if (res.confirm) {
					confirm_receipt(order_id).then(res => {
						if (res.status) get_list(0);
						COMMON.Toast(res.msg)
					})
				}
			}
		});
	}

	//取消订单
	function orderCancel(order_id) {
		uni.showModal({
			content: '确定取消订单吗？',
			success: function(res) {
				if (res.confirm) {
					cancel_order(order_id).then(res => {
						if (res.status) get_list(0);
						COMMON.Toast(res.msg)
					})
				}
			}
		});
	}

	// 跳转到物流跟踪页面
	function toExpress(express_no, express_name, phone, code) {
		uni.navigateTo({
			url: `/pages/order/express?express_no=${ express_no }&express_name=${ express_name }&phone=${ phone }&code=${ code }`
		});
	}

	// 跳转到商品评价页面
	function toComment(order_id, order_goods_id) {
		uni.navigateTo({
			url: `/pages/comment/create?order_id=${ order_id }&order_goods_id=${ order_goods_id }`
		});
	}
	
	// 跳转到申请售后
	function toRefund(order_id, order_goods_id) {
		uni.navigateTo({
			url: `/pages/refund/create?order_id=${ order_id }&order_goods_id=${ order_goods_id }`
		});
	}
</script>

<style lang="scss" scoped>
	@import '@/static/css/order.scss';
	.address_box .address_content .detail{
		width: 550rpx;
	}
	.express_box {
		position: relative;

		.c_icon {
			position: absolute;
			right: 30rpx;
			top: 70rpx;
			z-index: 3;
		}
	}

	.pay_price {
		padding: 15rpx 0;

		.b_price {
			float: right;

			.orderPrice {
				font-size: 32rpx;
			}
		}
	}

	.goods_operate {
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 100;
		background-color: #fff;
		border-top: 1px solid #ccc;
		padding: 20rpx 30rpx 50rpx 30rpx;

		.btn-item {
			width: 200rpx;
			font-size: 30rpx;
			line-height: 70rpx;
		}
	}
</style>